<template>
  <div class="v-modal-model-detail-nav">
    <div
      v-for="item in tabList"
      :key="item.key"
      class="_attr-item"
      :class="{ '_attr-avtive': item.key === activeKey }"
      @click="handleClickItem(item)"
    >
      <span>{{ $t(item.name) }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { AttributeTabKey } from "@/constants/Enums";

interface NavItem {
  key: AttributeTabKey;
  name: string;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  tabList: NavItem[];
  activeKey: string;
}>();

const emit = defineEmits<{
  (event: "changeActiveTab", key: AttributeTabKey, name: string): void;
}>();

const handleClickItem = (item: NavItem) => {
  emit("changeActiveTab", item.key, item.name);
};
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-modal-model-detail-nav {
  width: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: $frame-siderbar-bg-color;
  ._attr-item {
    height: 32px;
    line-height: 32px;
    color: #5a5a5a;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    padding-left: 21px;
    cursor: pointer;
    position: relative;
    border-right: 0;
    border-left: 0;
    border-bottom: none;
    &:first-child {
      border-top: 0;
    }
    img {
      margin-left: 8px;
      width: 16px;
      height: 16px;
      margin-top: 8px;
    }

    &._attr-avtive {
      background-color: #ffffff;
      color: $theme-color;
      font-weight: 600;
      border-color: rgba(228, 227, 227, 1);
      border-right-color: #ffffff;
      border-left: 4px solid $theme-color !important;
      padding-left: 17px !important;
    }
  }
}
</style>
